<template>
    <el-collapse>
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    图表组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>


<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";

export default {
    name: "EchartsIndex",
    components: {
        draggable
    },
    data() {
        return {
            list: [
                {
                    name: "折线图", title: "折线图编辑", component: "LineChartComponent", drawerComponent: "LineChartComponentDrawer", sourceId: 1,
                    propJson: {
                        editFlag: true,
                        title: "", // 表格标题
                        titleFontSize: "18", // 标题字体大小
                        isAddLegend: false, // 是否启用多数据
                        legendData: {optionValueType: "custom", optionsCustom: "标题", optionsCustomValueType: "String", optionsVariableParam: "",
                                apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}, // 图例信息
                        isAddToolTip: false, // 是否添加鼠标悬浮提示
                        tooltipTrigger: 'axis', // 提示的触发类型
                        tooltipAxisPointerType: "cross", // 指示器类型
                        containerHeight: "400", // 图表高度
                        isContainerAutoWidth: true, // 是否自适应宽度
                        containerWidth: "", // 图标宽度
                        isAddSaveImageTool: false, // 是否开启保存图片功能
                        saveImageType: "png", // 保存的图片格式
                        saveImageName: "", // 保存的图片名称
                        isAddDataZoom: false, // 是否开启缩放功能
                        xAxisType: "category", // x坐标轴类型
                        xAxisName: "", // 坐标轴名称
                        xAxisData: "[]", // 坐标轴数据
                        xAxisIsBoundaryGap: false, // 坐标轴留白策略
                        xAxisCategoryBoundaryGap: false, // 类目轴的留白策略
                        xAxisBoundaryGapLeft: "", // 非类目轴的左侧留白策略
                        xAxisBoundaryGapRight: "", // 非类目轴的左侧留白策略
                        yAxisType: "value", // y坐标轴类型
                        yAxisName: "", // 坐标轴名称
                        yAxisIsBoundaryGap: false, // 坐标轴留白策略
                        yAxisCategoryBoundaryGap: false, // 类目轴的留白策略
                        yAxisBoundaryGapTop: "", // 非类目轴的上侧留白策略
                        yAxisBoundaryGapBottom: "", // 非类目轴的下侧留白策略
                        yAxisIsAddUnit: false, // Y轴是否添加单位
                        yAxisUnitInfo: "", // Y轴单位内容
                        isAddAreaStyle: false, // 是否为面积图
                        isAddAreaLight: false, // 面积选中是否高亮
                        areaLightType: "none", // 高亮聚焦状态
                        isSmooth: false, // 是否启用平滑曲线
                        chartDataValue: {optionValueType: "custom", optionsCustom: "标题", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                    }
                }
            ]
        }
    },
    methods: {
        cloneDefaultField(e) {
            return deepCopy(e);
        },
        onStart(e) {
            e.item._underlying_vm_.id = this.generateUUID();
        },
        randomNumber() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        generateUUID() {
            return (this.randomNumber() + this.randomNumber() + "-" + this.randomNumber() + "-" + this.randomNumber() +
                "-" + this.randomNumber() + "-" + this.randomNumber() + this.randomNumber() + this.randomNumber());
        }
    }
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>